<template>
	<view>
		<!-- 上面选择标签 -->
		<view class="uni-tab">
			<view class="uni-tab-item" :class="tabIndex==index? 'uni-tab-item-active': ''"
				v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" @click="ontabtap(index)">
				<text class="uni-tab-item-title"
					:class="tabIndex==index?'uni-tab-item-title-active':''">{{tab.name}}</text>
			</view>
		</view>
		<!-- 下面标签页 -->
		<swiper class="swiper" :style="{height: swiperHeight+'px'}" :current="tabIndex" @change="changing">
			<swiper-item class="swiper1">
				<focus />
			</swiper-item>

			<swiper-item class="swiper2">
				<recommend />
			</swiper-item>

			<swiper-item class="swiper3">2</swiper-item>

		</swiper>
	</view>
</template>

<script>
	import focus from '../../components/focus.vue'
	import recommend from '../../components/recommend/recommend.vue'
	export default {
		data() {
			return {
				// 设置默认的swiper高度
				// swiperHeight: 3000,
				tabList: [{
					id: "tab01",
					name: '关注',
					newsid: 0
				}, {
					id: "tab02",
					name: '推荐',
					newsid: 23,
				}, {
					id: "tab03",
					name: '直播',
					newsid: 223
				}],
				// 默认选中的热门
				tabIndex: 1,
			}
		},
		components: {
			recommend,
			focus,
		},
		computed: {
			swiperHeight() {
				// 设置动态swiper高度
				return window.innerHeight += 500
			},
		},
		methods: {
			ontabtap(e) {
				this.tabIndex = e;
				console.log(e + '选中的标签')
			},
			// 左右滑动切换上面标签
			changing(e) {
				console.log(e.detail.current)
				this.tabIndex = e.detail.current
			},
		},
		// 生命周期函数，加载完毕执行
		mounted() {},
		// 生命周期函数，页面滚动到底部的事件
		onReachBottom() {
			console.log('页面滚到底部')
			this.swiperHeight
		}
	}
</script>

<style scoped>
	/* 上面tub搜索栏 */
	.uni-tab {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 44px;
		left: 0px;
		width: 100vw;
		z-index: 1040;
		background-color: #fff;
	}

	.uni-tab-item {
		padding: 0 20px;
	}

	.uni-tab-item-active {
		border-bottom: solid 2px #007AFF;
	}

	.uni-tab-item-title {
		color: #555;
		font-size: 15px;
		height: 40px;
		line-height: 40px;

		flex-wrap: nowrap;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
	}

	.uni-tab-item-title-active {
		color: #007AFF;
	}

	/* 下面的页面 */
	.swiper {
		margin-top: 40px;
		background-color: #f7f7f7;
	}

	.swiper1 {
		background-color: #F7F7F7;
	}

	.swiper2 {
		background-color: #F7F7F7;
	}

	.swiper3 {
		background-color: #6cf;
	}
</style>
